<template>
	<div class="main">
		<a-layout>
			<a-layout-sider class="layout-sider" :width="menuWidth" collapsible :trigger="null" :collapsed="collapsed">
        <div class="logo"><img :src="logo" alt="" srcset=""></div>
        <Menu></Menu>
			</a-layout-sider>
			<a-layout>
				<a-layout-header class="layout-header">
          <Header @toggleMenu='toggleMenu'></Header>
        </a-layout-header>
        <TagNav ref="tagNav"></TagNav>
				<a-layout-content class="content">
          <router-view></router-view>
        </a-layout-content>
				<!-- <a-layout-footer>Footer</a-layout-footer> -->
			</a-layout>
		</a-layout>
	</div>
</template>

<script>
  import config from 'public/config/config.js'
  import Menu from './components/menu'
  import Header from './components/header'
  import TagNav from './components/tagNav'
	export default {
		name: 'Main',   
		components: {
      Menu,
      Header,
      TagNav,
		},
		data(){
			return{
        menuWidth:config.menuWidth,
        logo:require('public/images/logo.png'),
        collapsed:false,
        selectedKeys:['sub1'],
        menus:[],
        openKey:[],
        showMain:false
			}
    },
    computed: {
      tagList(){
        return this.$store.state.menu.tagList
      }
    },
    created(e) {
      console.log("created main")
    },
    methods: {
      toggleMenu:function () {
        this.collapsed = !this.collapsed
      }
    },
	}
</script>

<style scoped>
	.main .layout-sider {
    height: 100vh;
    overflow: hidden;
	}
  .main .logo{
    width: 200px;
    height: 50px;
    margin: auto;
  }
  .main .layout-header{
    background-color: #ffffff;
    padding: 0;
  }
  .main .content{
    max-height: calc(100vh - 104px);
    overflow-y: auto;
  }
</style>
